import emitter from "../utils/eventbus";
import d3DrawStore from "../store/modules/d3Draw";
import * as d3 from "d3";

export function initTubings($: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number) {
    let id: string = $.attr("id");
    const d3Canvas = d3CanvasRef;//画布信息
    const widthCenter = d3Canvas.offsetWidth / 2 //中心线
    const yScale = d3DrawStore().scale
    const tubing = { left: undefined, right: undefined }
    const start = yScale(heightStart)
    const end = yScale(heightEnd)
    tubing.left = $.append("line")
        .attr("x1", widthCenter - width / 2)
        .attr("y1", start)
        .attr("x2", widthCenter - width / 2)
        .attr("y2", end)
        .attr("stroke-width", 2)
        .attr("stroke", "red");
    tubing.right = $.append("line")
        .attr("x1", widthCenter + width / 2)
        .attr("y1", start)
        .attr("x2", widthCenter + width / 2)
        .attr("y2", end)
        .attr("stroke-width", 2)
        .attr("stroke", "red");
    const drag = d3
        .drag()
        .on("drag", (event) => {
            const newY2 = event.y;
            tubing.left.attr("y2", newY2);
            tubing.right.attr("y2", newY2);
        });

    // 应用拖动行为到线段上
    tubing.left.call(drag);
    tubing.right.call(drag)
    emitter.on(id, (transform: any) => {
        tubing.left.attr("transform", transform);
        tubing.right.attr("transform", transform);
    });
    return tubing
}

export function updateTubings(tubing: any, d3CanvasRef: any, width: number, heightStart: number, heightEnd: number, color: string = "red") {
    const widthCenter = d3CanvasRef.offsetWidth / 2 //中心线\
    const yScale = d3DrawStore().scale
    const start = yScale(heightStart)
    const end = yScale(heightEnd)
    tubing.left
        .attr("x1", widthCenter - width / 2)
        .attr("x2", widthCenter - width / 2)
        .attr("y1", start)
        .attr("y2", end)
    tubing.right
        .attr("x1", widthCenter + width / 2)
        .attr("x2", widthCenter + width / 2)
        .attr("y1", start)
        .attr("y2", end)
    return tubing
}
export function deleteTubings(tubing: any) {
    tubing.left.remove();
    tubing.right.remove();
}